<template>
  <div class="app-container">
    <div class="filter-container">
      <v-search
        :isSearchKeywords="false"
        :selecteList="importanceOptions"
        @onSearch="searchData"
      />
    </div>
    <el-table
      v-loading="listLoading"
      :key="tableKey"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;">
      <el-table-column
        label="用户ID"
        prop="id"
        align="center"
        width="100">
      </el-table-column>
      <el-table-column label="账号" prop="account" align="center" width="160" />
      <el-table-column label="昵称" prop="nickname" align="center" width="200" />
      <el-table-column label="性别" align="center" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.sex == 0 ? '保密' : scope.row.sex == 1 ? '男' : '女' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="会员" width="110">
        <template slot-scope="scope">
          <el-tag
            v-show='scope.row.is_vip == 2'
            :type="scope.row.vip_type == 2 ? 'danger' : ''">
            {{scope.row.vip_type == 2 ? '年会员' : '月会员'}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="认证" width="110">
        <template slot-scope="scope">
          <el-tag
            v-show='scope.row.is_auth == 2'
            :type="scope.row.is_auth == 2 ? 'danger' : ''">
            {{scope.row.vip_type == 2 ? '企业' : '个人'}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="注册时间" prop="create_time" align="center" />
      <el-table-column
        fixed="right"
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button @click="deleteUser(scope.row)" type="danger" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
  </div>
</template>

<script>
import { list, deleted } from '@/api/users'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import vSearch from '@/components/Search'

export default {
  components: {
    Pagination,
    vSearch
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: false,
      listQuery: {
        page: 1,
        limit: 10,
        sort: '-id',
        where: []
      },
      downloadLoading: false,
      importanceOptions: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      list(this.listQuery).then(response => {
        this.list = response.data.data
        this.total = response.data.total
        this.listLoading = false
      })
    },
    deleteUser(item) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.commit('SHOW_LOADING')
        deleted(item.id).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.list.splice(this.list.findIndex(c => c.id === item.id), 1)
          this.$store.commit('HIDE_LOADING')
        })
      })
      console.log(item)
    },
    searchData(data) {
      this.listQuery.page = 1
      this.listQuery.where = []
      if (data.selected) {
        this.listQuery.where.push({
          field: 'admin_log.admin_uid',
          op: 'eq',
          value: data.selected
        })
      }
      if (data.dateStart) {
        this.listQuery.where.push({
          field: 'admin_log.action_time',
          op: 'between',
          value: [data.dateStart, data.dateEnd]
        })
      }
      this.getList()
    }
  }
}
</script>
